import { forwardRef } from 'react';

import { ReactComponent as ErrorIcon } from '@/shared/icons/error.svg';
import { ReactComponent as SuccessIcon } from '@/shared/icons/success.svg';
import cn from 'classnames';
import { SnackbarKey, SnackbarMessage, useSnackbar } from 'notistack';
import { useWindowSize } from 'usehooks-ts';

import s from './Snackbar.module.scss';
import { useSwipe } from './useSwipe';

interface Props {
  id: SnackbarKey;
  message: SnackbarMessage;
  variant: 'error' | 'success';
  size?: 'sm' | 'md';
}

const icons: Record<Props['variant'], JSX.Element> = {
  success: <SuccessIcon />,
  error: <ErrorIcon />,
};

export const Snackbar = forwardRef<HTMLDivElement, Props>(({ message, size = 'sm', id, variant, ...other }, ref) => {
  const { closeSnackbar } = useSnackbar();
  const { width } = useWindowSize();
  const onClick = () => closeSnackbar(id);
  const swipeHandlers = useSwipe({ onSwipedUp: () => closeSnackbar() });
  return (
    <div ref={ref} {...other} {...swipeHandlers}>
      <div className={cn(s.snack, s[variant], s[size])} onClick={() => width > 768 && onClick()}>
        {icons[variant]}
        <p>{message}</p>
      </div>
    </div>
  );
});
